<script setup>
import { Delete } from '@element-plus/icons-vue'
import { useDormitoryStore } from '@/store/super-manger/dormitory'
import { useCommonStore } from '@/store/commonStore'
import { storeToRefs } from 'pinia';
import { formatTime } from '@/utils/formatTime'
import eventBus from '@/utils/eventBus'
import { delDormitoryApi } from '@/service/dormitory'
import { showElMessage } from '@/utils/showTipMessage'

const commonStore = useCommonStore();
const dormitoryStore = useDormitoryStore();
const { isShowTipInfo, tipInfoContent, oplationType, oplationId } = storeToRefs(commonStore);
const { tableData, isDialogVisible, build, roomName } = storeToRefs(dormitoryStore);

const tableHeaderStyle = {  // 表头样式
  background: '#f5f7f6',
  height: '50px'
}

// 删除功能
const delBtnClick = (row) => {
  const { building, room_name, id } = row;
  isShowTipInfo.value = true;
  tipInfoContent.value = `确定删除【${building}-${room_name}】宿舍的信息记录吗？`;
  oplationType.value = 'delete';
  oplationId.value = id;

}
eventBus.on('deleteBtnClick', async() => {
  // 发送网络请求删除数据
  const res = await delDormitoryApi(oplationId.value);
  const { code } = res.data;
  if (code) {
    showElMessage(`宿舍删除成功！`);
  }
})

// 设置寝室长
const setDormitoryLeader = (row) => {
  isDialogVisible.value = true;
  // 发送网络请求，获取该宿舍的所有成员
  const { building, room_name } = row;
  dormitoryStore.getAllNumbers(building, room_name);
  build.value = building;
  roomName.value = room_name;
}
</script>

<template>
  <div 
    class="table"
   
  >
    <el-table 
      :data="tableData" 
      style="width: 100%"
      border
      :header-cell-style="tableHeaderStyle"
      empty-text="暂无数据"
    >
      <el-table-column type="index" label="序号" width="55"  fixed="left"/>
      <el-table-column label="宿舍ID" prop="id" width="180" />
      <el-table-column label="宿舍楼" width="180">
        <template #default="scoped">
          <span>{{ scoped.row.building }} 号楼</span>
        </template>
      </el-table-column>
      <el-table-column label="宿舍号" prop="room_name" width="180"/>
      <el-table-column label="寝室长（姓名、学号）" prop="dormitory_leader" width="180">
        <template #default="scoped">
          <template v-if="scoped.row.dormitory_leader">
            <p class="name">{{ scoped.row.dormitory_leader.name }}</p>
            <p class="sno">{{ scoped.row.dormitory_leader.sno }}</p>
          </template>
          <template v-else>
            <span class="await_choose">待选择</span>
          </template>
        </template>
      </el-table-column>
      <el-table-column label="宿舍类型" width="180">
        <template #default="scoped">
          <span>{{ scoped.row.dormitory_type }} 人间</span>
        </template>
      </el-table-column>
      <el-table-column label="空余床位" prop="available" width="180" />
      <el-table-column label="创建时间" prop="create_time" width="180">
        <template #default="scoped">
          <span>{{ formatTime(scoped.row.create_time) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="180" fixed="right">
            <template #default="scoped">
              <el-button 
                type="danger" 
                size="small" 
                plain
                @click="delBtnClick(scoped.row)"  
                :disabled="Number(scoped.row.dormitory_type) !== scoped.row.available"
              >
                  <el-icon><Delete/></el-icon>
                  删除
              </el-button>
              <el-button 
                plain 
                size="small" 
                @click="setDormitoryLeader(scoped.row)"
              >寝室长</el-button>
            </template>
        </el-table-column>
    </el-table>
  </div>
</template>

<style scoped lang="less">
.sno {
  font-size: 12px;
  color: #999;
}
.await_choose {
  color: #f00;
}
</style>